<script lang="ts" setup>
    import DataBlock from './components/data-block.vue'
    import DataOften from "./components/data-often.vue"
    import DataToday from './components/data-today.vue'
    import DataBroken from './components/data-broken.vue'
    import DataCake from './components/data-cake.vue'
</script>

<template>
    <div class="home">
        <el-row :gutter="16">
            <data-block></data-block>
        </el-row>    
        <el-row :gutter="16" class="z-m-t-16">
            <el-col :span="12">
                <data-often></data-often>
            </el-col>
            <el-col :span="12">
                <data-today></data-today>
            </el-col>
        </el-row>
        <el-row :gutter="16" class="z-m-t-16">
            <el-col :span="12">
                <data-broken></data-broken>
            </el-col>
            <el-col :span="12">
                <data-cake></data-cake>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="scss">
    :deep(.findmore) {
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #ccc;
      transition: all .2s;
      &:hover { color: #fff; }
    }
</style>